<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>主页</title>
  </head>
  <link rel="stylesheet" href="./css/vant.css" />
  <script src="./js/vue3.js"></script>
  <script src="./js/vant4.js"></script>
  <style>
    @font-face {
      font-family: "fff";
      src: url("./font/SourceHanSansSC-Regular-2.otf");
    }
    body {
      font-family: "fff";
      background-color: #f9f9fc;
    }
  </style>
  <body>
    <div id="app" v-cloak>
      <!-- <van-popup
  v-model:show="showBottom"
  position="bottom"
  round
  :style="{ height: '90%' }"
>
<div style="padding-top: 20px;padding: 10px;box-sizing: border-box;width: 100%;height: 100%; border: 1px solid red;">
  <div v-for="e in chooseList" v-on:click="showPop(e)"  style="position: relative;margin-top: 10px;"> 
    <img v-for="es in e.PointList" style="width: 10px;height: 10px;background-color: red;border-radius: 4px;" :src="es.EquType.ImageInfo.FilePath" :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}"/>
    <img :src="e.ImageInfo.FilePath" alt="" style="width: 100%;height: 212px;border: 1px solid blue;" srcset="">
  </div>
</div>
</van-popup> -->
      <canvas
        v-show="false"
        id="canvas"
        style="width: 100%; height: 212px"
      ></canvas>
      <van-popup
        v-model:show="showBottom1"
        position="bottom"
        round
        :style="{ height: '90%' }"
      >
        <div
          style="
            padding-top: 20px;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
          "
        >
          <div
            v-for="e in chooseList"
            v-on:click="showPop(e)"
            style="position: relative; margin-top: 10px"
          >
            <img
              v-for="es in e.PointList"
              style="width: 10px; height: 10px; border-radius: 4px"
              :src="es.EquType.ImageInfo.FilePath"
              :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}"
            />
            <img
              :src="e.ImageInfo.FilePath"
              ref="test"
              alt=""
              style="width: 100%; height: 212px"
              srcset=""
            />
          </div>
        </div>
      </van-popup>
      <van-skeleton title :row="20" :loading="loading">
        <van-row>
          <van-col span="24">
            <van-search
              v-model="svalue"
              shape="round"
              show-action
              placeholder="请输入搜索关键词"
            >
              <template v-slot:action>
                <div
                  style="
                    width: 63px;
                    height: 32px;
                    background: #014da1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    border-radius: 12px;
                  "
                >
                  搜索
                </div></template
              >
            </van-search>

            <van-collapse
              v-model="activeNames"
              accordion
              v-on:change="collChange"
            >
              <van-collapse-item v-for="(e,i) in list1">
                <template #title>
                  <div
                    style="
                      width: auto;
                      height: 100%;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        width: 18px;
                        background-color: #014da1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        height: 18px;
                        border-radius: 50%;
                      "
                    >
                      {{i+1}}
                    </div>
                    <div style="margin-left: 8px">{{e.Name}}</div>
                  </div>
                </template>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      width: 327px;
                      margin: 0 auto;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <div
                      v-for="es in e.ItemList"
                      style="
                        display: flex;
                        align-items: center;
                        margin-right: 4px;
                      "
                    >
                      <img
                        style="
                          width: 14px;
                          height: 14px;

                          margin-right: 4px;
                        "
                        :src="es.ImgUrl"
                        alt=""
                      />
                      <div style="font-size: 11px">
                        {{es.TypeName}}：{{es.Count}}
                      </div>
                    </div>
                  </div>
                  <img
                    :src="e.Map"
                    v-on:click="showDot(e)"
                    style="width: 327px; height: 168px; margin-top: 10px"
                    alt=""
                  />
                </div>
                <div
                  style="
                    border-top: 2px #fafafa;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-top: 10px;
                    align-items: center;
                  "
                >
                  <div
                    v-for="e in list2"
                    style="
                      width: 320px;
                      height: 43px;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                    "
                  >
                    <div>{{e.Name}}</div>
                    <div
                      style="
                        flex: 1;
                        margin-left: 6px;
                        height: 1px;
                        border-top: 1px dashed #d8d8d8;
                      "
                    ></div>
                    <van-icon
                      style="transform: rotate(90deg)"
                      size="18"
                      v-on:click="cfloor(e.Id)"
                      name="ellipsis"
                    />
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </van-col>
        </van-row>
        <van-popup
          v-model:show="showBottom"
          position="bottom"
          round
          :style="{ height: '75%' }"
        >
          <div style="width: 100%; height: 100%; box-sizing: border-box">
            <div
              style="
                width: 100%;
                height: 43px;
                display: flex;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                border-bottom: 1px dashed #d8d8d8;
              "
            >
              {{cobj.Name}}
            </div>
            <div style="height: calc(100% - 50px); overflow: scroll">
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                  align-items: center;
                  font-size: 12px;
                  color: #757c8c;
                  margin-top: 14px;
                "
              >
                <div
                  style="
                    width: 327px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div
                    v-for="e in cobj.ItemList"
                    style="
                      display: flex;
                      align-items: center;
                      margin-right: 14px;
                    "
                  >
                    <img
                      :src="e.ImgUrl"
                      style="
                        width: 16px;
                        height: 16px;

                        margin-right: 4px;
                      "
                      alt=""
                    />
                    <div style="font-size: 13px">
                      {{e.TypeName}}：{{e.Count}}
                    </div>
                  </div>
                </div>
                <img
                  :src="cobj.Map"
                  v-on:click="showDot(cobj.MapList)"
                  style="width: 327px; height: 168px; margin-top: 10px"
                  alt=""
                />
              </div>
              <div>
                <van-collapse v-model="activeNames1">
                  <van-collapse-item v-for="(e,i) in list3">
                    <template #title>
                      <div
                        style="
                          width: auto;
                          height: 100%;
                          display: flex;
                          align-items: center;
                        "
                      >
                        <div
                          style="
                            width: 18px;
                            color: #014da1;
                            border: 1px solid #014da1;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            height: 18px;
                            border-radius: 50%;
                          "
                        >
                          {{i+1}}
                        </div>
                        <div style="margin-left: 8px">{{e.Name}}</div>
                      </div>
                    </template>
                    <div
                      style="
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                      "
                    >
                      <div
                        style="
                          width: 327px;
                          margin: 0 auto;
                          display: flex;
                          align-items: center;
                        "
                      >
                        <div
                          v-for="es in e.ItemList"
                          style="
                            display: flex;
                            align-items: center;
                            margin-right: 14px;
                          "
                        >
                          <img
                            style="width: 16px; height: 16px; margin-right: 4px"
                            :src="es.ImgUrl"
                            alt=""
                          />
                          <div style="font-size: 13px">
                            {{es.TypeName}}：{{es.Count}}
                          </div>
                        </div>
                      </div>
                      <img
                        :src="e.Map"
                        v-on:click="showDot(e)"
                        style="width: 327px; height: 168px; margin-top: 10px"
                        alt=""
                      />
                    </div>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>
        </van-popup>
      </van-skeleton>
    </div>
  </body>

  <script src="./js/axios.js"></script>
  <script type="module">
    import Request from "./js/request.js";
    const {
      createApp,
      ref,
      onMounted,
      h,
      reactive,
      toRefs,
      getCurrentInstance,
    } = Vue;
    const Composition = {
      setup() {
        const data = reactive({
          list1: [],
          list2: [],
          list3: [],
          proxy: "",
          cobj: {},
          ctx: "",
          dpr: 1,
          canvas: "",
          chooseList: [],
          url: "",
          loading: true,
          activeNames: [],
          activeNames1: [],
          svalue: "",
          showBottom: false,
          showBottom1: false,
        });
        function queryURLParams(url) {
          const searchParams = window.location.search.substring(1).split("&");
          const params = {};

          for (const param of searchParams) {
            const [key, value] = param.split("=");
            params[key] = value;
          }

          return params;
        }

        const params = toRefs(data);
        const methods = {
          init: () => {
            let { id } = queryURLParams(window.location.href);
            params.loading.value = true;
            Request({
              url: "/FireControl/getbuildingList",
              method: "get",
              params: {
                Id: id,
              },
            }).then((res) => {
              params.list1.value = res.Data;
              params.loading.value = false;
            });
          },

          cfloor: (id) => {
            params.showBottom.value = true;

            let obj = params.list2.value.find((e) => e.Id == id);
if(!obj.Map){
  return vant.showToast("暂无场所图");
}


console.log(obj)
            params.cobj.value = obj;
            Request({
              url: "/FireControl/GetPlaceList",
              method: "get",
              params: {
                FloorId: id,
              },
            }).then((res) => {
              params.list3.value = res.Data;
            });
          },
          // url 图片路径
          loadImage(list) {
            let s = [];
            return new Promise((resolve, reject) => {
              list.forEach(async (e, i) => {
                const img = new Image();
                img.setAttribute("crossOrigin", "anonymous");
                img.src = e.bg;
                img.onload = function () {
                  params.ctx.value.drawImage(
                    img,
                    (params.canvas.value.width / params.dpr.value) * e.x,
                    (params.canvas.value.height / params.dpr.value) * e.y,
                    15,
                    15
                  );
                  s.push(i);
                  console.log(s);
                  if (s.length == list.length) {
                    resolve(true);
                  }
                };
              });
            });
          },

          loadBaseImage: (url) => {
            return new Promise((resolve, reject) => {
              const img = new Image();
              img.setAttribute("crossOrigin", "anonymous");
              img.src = url;
              img.onload = () => {
                const width = params.proxy.value.$refs.test[0].width;
                const height = params.proxy.value.$refs.test[0].height;
                params.canvas.value.width = width * params.dpr.value;
                params.canvas.value.height = height * params.dpr.value;
                params.ctx.value.scale(params.dpr.value, params.dpr.value);
                params.ctx.value.drawImage(img, 0, 0, width, height);
                // 当图像加载完成后进行resolve
                resolve(img);
              };
              img.onerror = () => {
                vant.showToast("图像加载失败");
                reject(new Error("图像加载失败"));
              };
            });
          },

          drowImage: (url, list) => {
            return new Promise(async (resolve, reject) => {
              vant.showLoadingToast({
                duration: 0,
                forbidClick: true,
                message: "数据加载中",
              });
              params.canvas.value = document.getElementById("canvas");
              params.ctx.value = params.canvas.value.getContext("2d");

              let res = await methods.loadBaseImage(url);
              if (res) {
                let ress = await methods.loadImage(list);
                if (ress) {
                  params.canvas.value.toBlob((blob) => {
                    const imageUrl = URL.createObjectURL(blob);

                    params.url.value = imageUrl;

                    resolve(true);
                  });
                }
              }
            });
          },

          showDot: (e) => {
            console.log(e,'eee')
            if(e.MapList){
              if(!e.Map){
                return vant.showToast("暂无场所图");
              }

          }else{
console.log(e)
}
            params.showBottom1.value = true;
            params.chooseList.value = e.MapList || e;
          },


          showPop: async (e) => {
            let list =
              e.PointList &&
              e.PointList.map((es) => {
                return {
                  x: es.X,
                  y: es.Y,
                  bg: es.EquType.ImageInfo.FilePath,
                };
              });

            if (list.length == 0) {
              return vant.showToast("暂无标记点位");
            }
      
            let fres = await methods.drowImage(e.ImageInfo.FilePath, list);
            if (fres) {
              vant.closeToast();
              vant.showImagePreview({
                images: [params.url.value],
                showIndex: false,
                closeable: true,
              });
            }
          },
          collChange: (e) => {
            let id = params.list1.value[e].Id;

            Request({
              url: "/FireControl/getFloorList",
              method: "get",
              params: {
                BuildingId: id,
              },
            }).then((res) => {
              params.list2.value = res.Data;
            });
          },
        };

        onMounted(() => {
          params.dpr.value = 4
          methods.init();
          const { proxy } = getCurrentInstance();
          params.proxy.value = proxy;
        });

        return {
          // 返回对象给模板
          ...params,
          ...methods,
        };
      },
    };

    const vapp = createApp(Composition);
    vapp.use(vant.Lazyload);
    vapp.use(vant).mount("#app");
  </script>
</html>
